// app/procurement/dashboard/page.tsx
import * as React from "react";
import { Skeleton } from "@/components/ui/skeleton";
import { Shell } from "@/components/shell";
import { ErrorBoundary } from "@/components/error-boundary";
import { getDashboardData } from "@/lib/dashboard/service";
import { DashboardClient } from "@/lib/dashboard/dashboard-client";

// 대시보드 데이터 로딩 컴포넌트
async function DashboardContent() {
  try {
    const data = await getDashboardData("engineering");
    
    const handleRefresh = async () => {
      "use server";
      return await getDashboardData("engineering");
    };

    return (
      <DashboardClient
        initialData={data} 
        onRefresh={handleRefresh}
      />
    );
  } catch (error) {
    console.error("Dashboard data loading error:", error);
    throw error;
  }
}

// 대시보드 로딩 스켈레톤
function DashboardSkeleton() {
  return (
    <div className="space-y-6">
      {/* 헤더 스켈레톤 */}
      <div className="flex items-center justify-between">
        <div className="space-y-2">
          <Skeleton className="h-8 w-48" />
          <Skeleton className="h-4 w-72" />
        </div>
        <Skeleton className="h-10 w-24" />
      </div>

      {/* 요약 카드 스켈레톤 */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {[...Array(4)].map((_, i) => (
          <div key={i} className="space-y-3 p-6 border rounded-lg">
            <div className="flex items-center justify-between">
              <Skeleton className="h-4 w-16" />
              <Skeleton className="h-4 w-4" />
            </div>
            <Skeleton className="h-8 w-12" />
            <Skeleton className="h-3 w-20" />
          </div>
        ))}
      </div>

      {/* 차트 스켈레톤 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {[...Array(2)].map((_, i) => (
          <div key={i} className="space-y-4 p-6 border rounded-lg">
            <div className="space-y-2">
              <Skeleton className="h-6 w-32" />
              <Skeleton className="h-4 w-48" />
            </div>
            <Skeleton className="h-[300px] w-full" />
          </div>
        ))}
      </div>

      {/* 탭 스켈레톤 */}
      <div className="space-y-4">
        <Skeleton className="h-10 w-64" />
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {[...Array(6)].map((_, i) => (
            <div key={i} className="space-y-4 p-6 border rounded-lg">
              <Skeleton className="h-6 w-32" />
              <div className="space-y-3">
                <div className="flex justify-between">
                  <Skeleton className="h-4 w-16" />
                  <Skeleton className="h-4 w-12" />
                </div>
                <div className="flex gap-2">
                  <Skeleton className="h-6 w-16" />
                  <Skeleton className="h-6 w-16" />
                  <Skeleton className="h-6 w-16" />
                </div>
                <Skeleton className="h-2 w-full" />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// 에러 표시 컴포넌트
function DashboardError({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div className="flex flex-col items-center justify-center py-12 space-y-4">
      <div className="text-center space-y-2">
        <h3 className="text-lg font-semibold">대시보드를 불러올 수 없습니다</h3>
        <p className="text-muted-foreground">
          {error.message || "알 수 없는 오류가 발생했습니다."}
        </p>
      </div>
      <button
        onClick={reset}
        className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
      >
        다시 시도
      </button>
    </div>
  );
}

export default async function DashboardPage() {
  return (
    <Shell className="gap-6">
      <ErrorBoundary fallback={DashboardError}>
        <React.Suspense fallback={<DashboardSkeleton />}>
          <DashboardContent />
        </React.Suspense>
      </ErrorBoundary>
    </Shell>
  );
}